<template>
  <div class="set">
     <user-head :title="title"></user-head>
     <div class="set-list">
       <ul class="set-item">
         <li class="user-phone"><div class="left">登录手机号</div><div class="right">{{ user.phone}}</div></li>
         <li class="money"><div class="left">余额</div><div class="right">￥{{user.money}}</div></li>
         <li class="exit">
           <div class="exit-button" @click="clearUser">退出登录</div>
         </li>
       </ul>
     </div>
  </div>
</template>

<script>
import userHead from '../head/'
import axios from 'axios'
export default {
  name: 'set',
  data () {
    return {
      title: '设置',
      user: {}
    }
  },
  created () {
    axios.post('/user/set', {
      params: {
        userId: String(this.$store.state.userId)
      }
    }).then(res => {
      this.user = res.data.data[0]
    })
  },
  methods: {
    clearUser () {
      localStorage.removeItem('user')
      this.$store.commit('changeUserId', '')
      this.$router.replace('/center')
    }
  },
  components: {
    userHead
  }
}
</script>

<style lang="scss">
@import '@/styles/common/px2rem.scss';
.set-list{
  padding: px2rem(20) px2rem(10);
  background-color: #ccf600;
  .set-item{
    li{
      border-bottom: 1px solid #3b14af;
      padding: px2rem(10);
      font-size: px2rem(16);
      display: flex;
      justify-content: space-between;
    }
    .exit{
      justify-content: center;
    }
  }
}
</style>
